VSCode＋WSL2＋Dockerでコンテナ環境へ接続してみた

髙嶋俊二

2021.06.08

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

アノテーションの髙嶋です。

私は業務の一環としてプログラムを書いていますが、最近ではコーディング/テストの環境はコンテナを使用して構築しています。コンテナを使うことで、アプリケーションごとに必要な環境を、それぞれ分けて構築することができるためです。

今回はVisual Studio CodeからDockerのコンテナを起動し、接続するまでの手順を記載しています。

前提条件

実行に必要なアプリケーションはすべてインストール済みの前提としています。

今回の実行環境は下記です。

OS：Windows 10 Pro(20H2)
Visual Studio Code：1.56.2 (以降、VSCodeと記述)
※拡張機能として「Remote-WSL」と「Remote-Containers」を使用
Docker：20.10.6
Docker Compose：1.29.1
WSL2：Ubuntu-20.04

実行手順

注意

今回、設定している内容は、コンテナを起動するだけの最低限のものになります。ファイルをローカルディスクへ残す設定をしていないため、コンテナを作り直した場合はコンテナ内の情報はすべて消えてしまいます。

設定ファイル作成

VSCodeからコンテナ環境へアクセスするための設定ファイルを２つ作成し、WSL2(Ubuntu)内へ配置します。 WindowsからWSL2(Ubuntu)内のフォルダへのアクセスは下記のパスから行えます。

\\wsl$\Ubuntu-20.04

今回は"user"フォルダ配下に"sample"というフォルダを作成し、下記のように配置しています。

\\wsl$\Ubuntu-20.04\home\user
　└sample
　　├docker-compose.yml
　　└.devcontainer
　　　└devcontainer.json

version: '3'
services:
  simple-container:
    image: python:latest
    tty: true

コンテナを起動するためのDockerの設定ファイルです。今回は"simple-container"という名前でサービスを設定し、Pythonの最新版イメージを使用するようにしています。他にどんなイメージを使用できるかはDocker Hubで探すことができます。

{
  "name": "container",
  "dockerComposeFile": [
    "../docker-compose.yml"
  ],
  "service": "simple-container",
  "workspaceFolder": "/home/",
}

VSCodeからコンテナへアクセスするための設定ファイルです。 "docker-compose.yml"で定義した"simple-container"へ接続するように設定しています。

起動手順

VSCodeからコンテナを起動し、接続します。

VSCodeの左下の"リモートウィンドウを開きます"をクリック。
"Open Folder In WSL..."を選択。
".devcontainer"フォルダが配置されているフォルダで"フォルダーの選択"をクリック。
VSCode上で選択したフォルダのファイルが表示されるので、"Reopen in container"をクリック。
指定したイメージがビルドされ、コンテナが起動します。

起動確認

ターミナルからPythonのバージョンを確認するコマンドを実行します。

python --version

"3.9.5"と表示され、Pythonのコンテナが起動できていることが確認できました。

Pythonのソースコードを書いて、ターミナルから実行してみます。

def hoge():
    print('Hello World!')

if __name__ == "__main__":
    hoge()

python test.py

プログラムが実行され、"Hello World!"の文字が出力されました。

こんな感じで、設定ファイルを記述することで、コンテナ環境を構築することができます。

最後に

今回はコンテナを起動して接続するまでをやってみました。

コンテナ環境は一度設定ファイルを記述できれば、複数端末に同じ環境を構築できるようになります。それにより、○○さんの環境だと動くけど、××さんの環境だとエラーになる、というような環境による差異を無くすことができます。

ただ、実際の開発環境として使用するためには今回の設定だけでは足りず、設定ファイルへ記述をいろいろ追加する必要があります。今後はそのあたりの記事も執筆していければと思います。

アノテーション株式会社について

アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。